Add a new Tab to BuddyPress Profile Page

BuddyPress is a plugin that transforms your WordPress site in a Social Network. Changing or extending the profile page is a common thing then, especially if you are working on a custom WordPress solution. In this tutorial you will learn how to add an additional tab on the profile page.

Why Would you add a Tab to the BuddyPress Profile Page?

Before we begin coding, I would like to list a few situations where a new tab is really useful. This will probably come up when you are creating a plugin with a new BuddyPress Component or even when you are creating a custom WordPress solution which uses BuddyPress.

In a project of mine, www.bookcoverpedia.com, I have added a few BuddyPress tabs on the profile page:

• Wishlisted covers
• Bought covers
• Reserved covers

Do you see how these additional tabs can really be helpful in a custom WordPress solution? You can even add something else such as your own custom messages to that user or special offers which he can view from his profile page.

Now that you understand why you may need these additional tabs in the BuddyPress Profile Page, let’s get going and create one!

BuddyPress function

Since BuddyPress is extendable, there is a core function that enables us to add the new tab. Our new tab will be used for showing recent posts from that user. The function that we will use to add this tab is called bp_core_new_nav_item.

The whole definition of that function is:

Parameters that are passed in the array are:

• name – Name displayed on the tab
• slug – a sanitized title to be used in URL such as  ../members/admin/my-tab
• position – position in the tab list. The default position is set to 99
• show_for_displayed_user – If set to TRUE, other visitors looking at the user profile page will be able to see that tab. Default value is set to TRUE
• site_admin_only – if set to TRUE, only administrator can see this tab
• screen_function – function name which will be called to show the content of that tab
• default_subnav_slug – the default slug of the subnav tabs which will be selected if there is any subnav under that tab
• item_css_id – ID that will be used in the HTML so that it can be used for CSS styling

Adding the new Tab on BuddyPress Profile Page

We will add the new tab by defining a function that will be used to add the tab. After that our function will be passed to the action when the BuddyPress is initialised. The code can be added to the functions.php inside your theme or in a plugin.

Now our tab will be added on the profile page but before trying to look for the tab we need to define the function that will be called to show all those recent posts.

Displaying the Tab Content

After the code we have added last, paste this:

In this function we have actually added two new functions to actions that are used by BuddyPress to show the content of the tab. We have also loaded the template that BuddyPress uses to set additional templates that are used on the Profile Page.

Display the Tab Title

This function is pretty simple for our case. We will only display the actual title of the tab to show before the recent posts.

Display the Recent Posts

This function will be used to display the recent posts from the user. We will need to get the ID of the user on the Profile Page and then query the database for the last 5 posts this user has published.

In this example we have retrieved the ID of the user on the profile page and if there is an ID greater than zero, then we query our database for posts by that user. If there are any posts, we display them as a list of posts.

Conclusion

In this tutorial you have learned how to add tabs on the BuddyPress profile page and you have also seen how to get the ID of the user on the profile page. This can be implemented in many situations and we have done it for a simple one where we need to display the recent posts of that user. Could be useful for a publishing website? 🙂

Have you ever developed anything in BuddyPress? Did you also implement additional tabs on the BuddyPress profile page? Please let us know and share your thoughts on it in the comments below!

Become a Sponsor